<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
		<moxi-nav :set="navSet"></moxi-nav>
		<view v-for="(list2, key2) in modData" :class="list2.mod_class" :style="list2.css">
			<!-- 展示地址 -->
			<view v-if="list2.name == 'address_list'">
				<view class="address-section">
					<view v-for="(list, key) in addressList" class="address-item"
						:style="list2.set.type == 2 && key == addressList.length - 1 ? 'margin-bottom: ' + 45 + 'px;' : ''">
						<view class="address-info">
							<view class="receiver-info">{{ list.name }} {{ maskPhoneNumber(list.phone) }}</view>
							<view class="address">
								<text class="city-text" v-for="l in list.city_info">{{ l }}</text>
								<text class="address-detail u-line-1">{{ list.address }}</text>
							</view>
						</view>
						<view class="address-control">
							<view class="default-tag" @click="setDefaultAddress(key)">
								<u-icon name="checkmark-circle-fill" :color="app_color" size="28rpx"
									v-if="list.is_default == 1"></u-icon>
								<u-icon name="checkmark-circle" color="#999999" size="28rpx" v-else></u-icon>
								<text class="text">默认地址</text>
							</view>
							<!-- 修改 -->
							<view class="address-revise" @click="add(key)">
								<u-icon name="edit-pen-fill" size="28rpx" color="#ccc"></u-icon>
								<text class="text">编辑</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 添加按钮 -->
				<view class="add-address-location"
					:style="list2.set.type == 2 ? 'position: fixed; background-color: #fff; bottom: ' + 0 + 'rpx;padding-bottom: ' + 10 + 'rpx;' : ''">
					<view class="add-address-btn">
						<u-button type="primary" :color="list2.set.app_color" text="添加地址" @click="add()"></u-button>
					</view>
				</view>

				<!-- 删除提示框 -->
				<u-modal :show="del_show" @cancel="del_show = false" @confirm="del()" content="确定要删除吗？删除后无法恢复"
					confirmColor="#2979ff" :showCancelButton="true"></u-modal>

				<!-- 添加/修改地址弹出层 -->
				<u-popup :show="show" @close="close" mode="bottom" round="10" :closeable="true">
					<view class="popup-content">
						<view class="input-container">
							<view class="input-row">
								<text>姓 名：</text>
								<u--input v-model="info.name" placeholder="收货人姓名" border="none" clearable>
								</u--input>
							</view>
							<view class="input-row">
								<text>电 话：</text>
								<u--input v-model="info.phone" placeholder="收货人手机电话" border="none" clearable>
								</u--input>
							</view>
							<view class="input-row" @click="city_show = true" style="position: relative;">
								<text>省/市：</text>
								<form-address :value="info.aid" @change="select_city">
									<view style="width: 100%;height: 30px;font-size: 14px;color: #666">
										{{ getName() }}
									</view>
								</form-address>
							</view>
							<view class="input-row">
								<text>街 道：</text>
								<u--input v-model="info.address" placeholder="详细街道门号" border="none" clearable>
								</u--input>
							</view>
							<view class="input-row">
								<text>默 认：</text>
								<u-switch v-model="info.is_default" :activeColor="list2.set.app_color"></u-switch>
							</view>
						</view>
						<view class="button-container">
							<u-button v-if="info.id" type="info" text="删除地址" :plain="true" :color="list2.set.app_color"
								@click="del(info.id)"></u-button>
							<u-button type="primary" :color="list2.set.app_color" text="保存地址" @click="save()"
								style="margin: 5px 0;"></u-button>
						</view>
					</view>
				</u-popup>
			</view>
			<moxi-index v-else :list="list2"></moxi-index>
		</view>

		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>

<script>
export default {
	data() {
		return {
			del_show: false,
			show: false,
			city_info: [],
			info: {
				name: "",
				phone: "",
				aid: [],
				address: '',
				is_default: false
			},
			cityName: "",
			cityList: false,
			addressList: [],
		}
	},
	onLoad() {
		this.get();
		this.cityList = uni.getStorageSync('cityList');
		let self = this;

		if (!this.cityList || this.cityList == '') {
			this.moxiPost('/index/tools/city', function (data) {
				self.cityList = data.data;
				uni.setStorage({
					key: 'cityList',
					data: self.cityList
				})
			})
		}

	},
	methods: {
		setDefaultAddress(key) {
			this.add(key, true);
		},
		// 添加电话打码函数
		maskPhoneNumber(phone) {
			if (!phone) return '';
			return phone.slice(0, 3) + '****' + phone.slice(7);
		},
		del() {
			this.show = false;
			if (this.del_show && this.info.id) {
				let self = this;
				this.moxiPost('/plugin/mall/user/address/del', {
					id: this.info.id
				}, function (data) {
					self.msg(data.hint);
					self.get();
					self.del_show = false;
				})
			} else {
				this.del_show = true;
			}
		},
		get() {
			let self = this;
			this.moxiPost('/plugin/mall/user/address/get', function (data) {
				self.addressList = data.data;
			})
		},
		getName() {
			if (this.info.aid.length) {
				return this.cityName =
					this.cityList[this.info.aid[0]].name + '/' +
					this.cityList[this.info.aid[0]].list[this.info.aid[1]].name + '/' +
					this.cityList[this.info.aid[0]].list[this.info.aid[1]].list[this.info.aid[2]].name;
			}
			return '请选择地址';
		},
		select_city(e) {

			this.$set(this.info, 'aid', [])
			for (let k in e) {
				this.info.aid.push(e[k])
			}
			this.getName();
		},
		add(key = false, defaultAddress = false) {
			if (!defaultAddress) {
				this.show = true;
			}

			// 重置表单
			if (key === false) {
				this.info = {
					name: "",
					phone: "",
					aid: [],
					address: '',
					is_default: false
				};
			}

			if (key === false) {
				if (this.info.id) {
					this.$delete(this.info, 'id');
				}
			} else {
				this.info = Object.assign(this.info, this.addressList[key]);
				this.info.is_default = this.info.is_default == 1 ? true : false;
				this.$forceUpdate();
			}

			// 绕过弹出层直接提交
			if (defaultAddress) {
				this.info.is_default = true;
				this.save();
			}
		},
		close() {
			this.show = false;
		},
		save() {
			if (!this.info.name.length || !this.info.aid.length ||
				!this.info.address.length || !this.info.phone.length) {
				this.msg('请填写完整收货信息')
			}
			let self = this;
			this.info['is_default'] = this.info['is_default'] ? 1 : 0;
			console.log(this.info);
			this.moxiPost("/plugin/mall/user/address/add", this.info, function (data) {
				self.get();
				self.close()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.address-section {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 32rpx 16rpx;
	gap: 32rpx;

	.address-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx 32rpx;

		.address-info {
			margin-bottom: 16rpx;

			.receiver-info {
				color: #000;
				font-size: clamp(14px, 4vw, 20px);
				font-weight: bold;
				margin-bottom: 8rpx;
			}

			.address {
				display: inline-flex;
				flex-direction: row;
				align-items: baseline;
				flex-wrap: wrap;

				.city-text {
					color: #666;
					font-size: clamp(12px, 3vw, 18px);
					margin-right: 20rpx;
				}

				.address-detail {
					color: #666;
					font-size: clamp(12px, 4vw, 18px);
				}
			}
		}

		.address-control {
			padding-top: 16rpx;
			border-top: 1rpx solid rgba($color: #000000, $alpha: 0.1);

			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.default-tag,
			.address-revise {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 20rpx;
				color: #999;

				.text {
					margin-left: 12rpx;
				}
			}
		}
	}
}

.add-address-location {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-top: 10px;
	z-index: 10;

	border-radius: 12rpx 12rpx 0 0;

	.add-address-btn {
		width: 700rpx;
		border-radius: 99px;
		overflow: hidden;
	}
}

.popup-content {
	height: 45vh;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.input-container {
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		flex-grow: 1;
		overflow: auto;

		.input-row {
			margin: 5px 0;
			display: flex;
			flex-direction: row;
			padding: 4px;
			border-bottom: 1px #dddddd solid;

			text {
				flex-shrink: 0;
				color: #666;
				font-size: 14px;
				width: 70px;
			}
		}
	}

	.button-container {
		flex-grow: 0;
	}
}
</style>